/**
 * 响应式布局样式
 * 提供不同屏幕尺寸的媒体查询断点和响应式规则
 * 增强移动端适配
 * @format
 */

// 容器宽度
.container {
  width: 100%;
  margin: 0 auto;
  padding: 0 15px;
  box-sizing: border-box;

  @media (min-width: 768px) {
    max-width: 750px;
  }

  @media (min-width: 1024px) {
    max-width: 970px;
  }

  @media (min-width: 1366px) {
    max-width: 1400px;
  }

  @media (min-width: 1920px) {
    max-width: 1800px;
  }
}

// 响应式网格系统
.row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -15px;
}

// 列基础样式
.col {
  padding: 0 15px;
  box-sizing: border-box;
  flex: 0 0 100%;
  max-width: 100%;
}

// 响应式显示/隐藏
@media (max-width: 767px) {
  .hidden-xs {
    display: none !important;
  }

  // 基础元素响应式调整
  body {
    font-size: 14px;
  }

  h1 {
    font-size: 24px !important;
  }

  h2 {
    font-size: 20px !important;
  }

  // 按钮响应式调整
  // button {
  //   &.btn-primary {
  //     height: 36px !important;
  //     font-size: 14px !important;
  //     padding: 0 15px !important;
  //     padding: 3px !important;
  //     border-radius: 8px !important;
  //   }

  //   &.btn-text {
  //     font-size: 12px !important;
  //     padding: 3px !important;
  //   }
  // }

  // 表格和列表通用响应式调整
  .order-item {
    margin-bottom: 15px !important;

    .order-info {
      flex-direction: column !important;
      height: auto !important;
      padding: 10px !important;

      .flex.align-center {
        flex-direction: column;
        align-items: flex-start !important;
        margin-bottom: 8px;
      }

      .order-date,
      .order-number {
        margin-right: 0 !important;
        margin-bottom: 5px;
      }

      .order-status {
        text-align: left !important;
      }
    }
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .hidden-sm {
    display: none !important;
  }
}

@media (min-width: 1024px) and (max-width: 1365px) {
  .hidden-md {
    display: none !important;
  }
}

@media (min-width: 1366px) and (max-width: 1919px) {
  .hidden-lg {
    display: none !important;
  }
}

@media (min-width: 1920px) {
  .hidden-xl {
    display: none !important;
  }
}

// 响应式文本对齐
@media (max-width: 767px) {
  .text-xs-center {
    text-align: center !important;
  }
  .text-xs-left {
    text-align: left !important;
  }
  .text-xs-right {
    text-align: right !important;
  }
}

// 响应式间距
.responsive-spacing {
  @media (max-width: 767px) {
    margin: 10px !important;
    padding: 10px !important;
  }

  @media (min-width: 768px) and (max-width: 1023px) {
    margin: 15px !important;
    padding: 15px !important;
  }
}

// 组件响应式适配
@media (max-width: 767px) {
  // Tab组件适配
  .comp-tab {
    width: 100% !important;
    overflow-x: auto !important;

    .tab-list {
      flex-wrap: nowrap !important;
      width: auto !important;

      .tab-item {
        font-size: 14px !important;
        padding: 8px 12px !important;
        white-space: nowrap;
      }
    }
  }

  // 分页组件适配
  .comp-pagination {
    .el-pagination {
      justify-content: center !important;
      flex-wrap: wrap !important;

      .el-pagination__sizes {
        display: none !important;
      }

      button {
        min-width: 28px !important;
        height: 28px !important;
      }

      .el-pager li {
        min-width: 28px !important;
        height: 28px !important;
        line-height: 28px !important;
        font-size: 12px !important;
      }
    }
  }
}

// 移动端订单列表适配
@media (max-width: 767px) {
  // 订单容器适配
  .my-order-container {
    padding: 15px !important;
    border-radius: 15px !important;
  }

  // 订单头部适配
  .my-order-header {
    flex-direction: column;
    align-items: flex-start !important;

    h1 {
      font-size: 24px !important;
      margin-bottom: 10px;
    }
  }

  // 订单表头在移动端隐藏
  .order-list-header {
    display: none !important;
  }

  // 订单内容改为垂直布局
  .order-content {
    flex-direction: column !important;
    padding: 15px 10px !important;

    .product-info {
      width: 100% !important;
      margin-bottom: 10px;

      .product-details {
        .product-name {
          width: auto !important;
        }
      }
    }

    .product-price,
    .product-quantity,
    .product-status,
    .product-amount {
      width: 100% !important;
      text-align: left !important;
      margin: 5px 0 !important;
      display: flex;
      justify-content: space-between;

      &:before {
        content: attr(data-label);
        font-weight: bold;
      }
    }

    .product-operations {
      width: 100% !important;
      flex-direction: row !important;
      flex-wrap: wrap;
      justify-content: flex-start;

      button {
        margin: 5px !important;
      }
    }

    @media (min-width: 1024px) {
      margin: 20px !important;
      padding: 20px !important;
    }
  }
}

// 响应式字体大小
.responsive-text {
  @media (max-width: 767px) {
    font-size: 14px !important;
  }

  @media (min-width: 768px) and (max-width: 1023px) {
    font-size: 16px !important;
  }

  @media (min-width: 1024px) {
    font-size: 18px !important;
  }
}

// 响应式图片
.responsive-image {
  max-width: 100%;
  height: auto;
}

// 响应式表格
.responsive-table {
  width: 100%;
  overflow-x: auto;

  @media (max-width: 1023px) {
    display: block;
  }
}
